<template>
  <div class="video-detail">
    <CustomHeader v-if="mv_data">{{ mv_data.name }}</CustomHeader>
    <video v-if="url" :src="url" controls loop autoplay></video>

    <div class="msg" v-if="mv_info">
      <div class="item">
        <div class="icon icon_base"></div>

        <div class="num">
          {{ mv_info.commentCount }}
        </div>
      </div>
      <div class="item">
        <div class="icon icon_base"></div>

        <div class="num">
          {{ mv_info.likedCount }}
        </div>
      </div>
      <div class="item" @click="showShare = true">
        <div class="icon icon_base"></div>

        <div class="num">
          {{ mv_info.shareCount }}
        </div>
      </div>
    </div>

    <UserCommentArea :comments="comments" :hotComments="hotComments" />

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="shareOptions"
    />
  </div>
</template>

<script>
import CustomHeader from "@/components/slot/headerbox/CustomHeader.vue";

import PlayListCommentItem from "@/components/basics/PlayListCommentItem.vue";
import UserCommentArea from "@/components/area/UserCommentArea.vue";
export default {
  name: "VideoDetail",
  components: {
    CustomHeader,
    PlayListCommentItem,
    UserCommentArea,
  },
  created() {
    const { id } = this.$route.query;
    Promise.all([
      this.getMvDetailData(id),
      this.getMvDetailInfo(id),
      this.getMvUrl(id),
      this.getMvComments(id),
    ]);

    this.$store.commit("videoPageCreated");
  },

  methods: {
    /**
     * 获取mv数据
     * @param id mvid
     */
    async getMvDetailData(id) {
      const res = await this.axios.get(`/mv/detail?mvid=${id}`);
      this.mv_data = res.data.data;
    },

    // 获取 mv 点赞转发评论数数据
    async getMvDetailInfo(id) {
      const res = await this.axios.get(`/mv/detail/info?mvid=${id}`);
      this.mv_info = res.data;
    },

    // mv 地址
    async getMvUrl(id) {
      const res = await this.axios.get(`/mv/url?id=${id}`);
      this.url = res.data.data.url;
    },

    // mv 评论
    async getMvComments(id) {
      const res = await this.axios.get(`/comment/mv?id=${id}`);
      this.comments = res.data.comments;
      this.hotComments = res.data.hotComments;
    },
  },

  data() {
    const shareOptions = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    return {
      url: null, // mv 播放地址
      mv_data: null, // mv 数据
      mv_info: null, // mv 评论数，喜欢数，分享数
      value: 0,
      option: [
        { text: "最新", value: 0 },
        { text: "最热", value: 1 },
      ],

      comments: [],
      hotComments: [],
      showShare: false,

      shareOptions,
    };
  },
};
</script>

<style lang="less" scoped>
.video-detail {
  width: 100%;
  margin-top: 50px;

  .msg {
    width: 100%;
    height: 50px;
    display: flex;

    .item {
      flex: 1;
      height: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      &:nth-of-type(1) {
        .icon {
          width: 50px;
          height: 50px;
          background-image: url("@/assets/评论_歌单排行榜.png");
        }
      }
      &:nth-of-type(2) {
        .icon {
          width: 50px;
          height: 50px;
          background-image: url("@/assets/kugou/爱心.png");
        }
      }
      &:nth-of-type(3) {
        .icon {
          width: 50px;
          height: 50px;
          background-image: url("@/assets/kugou/分享.png");
        }
      }
    }
  }
}
</style>
